Arnob210

# 📱 Daily Coding Tutorial — April 12, 2026 ## Welcome, New Developer! Today's Topic: **Building Your First Mobile App Screen** --- ## 🎯 What You'll Learn Today > **Goal:** Understand the core building blocks of a mobile app UI and build a simple **Profile Card Screen** from scratch. --- ## 🧱 Lesson 1: The Building Blocks of Every Mobile App Every mobile app screen is made of **widgets/components** stacked together. Think of it like LEGO bricks! | Building Block | What It Does | Real-World Example | |---|---|---| | **Container/View** | A box that holds things | A card on your screen | | **Text** | Displays words | A username label | | **Image** | Shows a picture | A profile photo | | **Button** | Responds to taps | A "Follow" button | | **Column/Row** | Lines things up vertically/horizontally | A list of menu items | --- ## 🛠️ Lesson 2: Let's Build a Profile Card! We'll use **Flutter** (Google's framework — works on iOS & Android from one codebase). It uses the **Dart** language, which is very beginner-friendly. ### Step 1 — Set Up Your Screen ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My First App', home: ProfileScreen(), // 👈 This is our main screen ); } } ``` > 💡 **Beginner Tip:** `runApp()` is like the "ON" switch for your app. `MaterialApp` gives you Google's design style for free! --- ### Step 2 — Build the Profile Screen ```dart class ProfileScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[100], // Light grey background appBar: AppBar( title: Text('My Profile'), backgroundColor: Colors.deepPurple, ), body: Center( child: ProfileCard(), // 👈 Our custom card widget ), ); } } ``` > 💡 **Beginner Tip:** `Scaffold` is like a blank canvas for your screen. It gives you an app bar, body, and more for free! --- ### Step 3 — Create the Profile Card Widget ```dart class ProfileCard extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 300, padding: EdgeInsets.all(20), // Space inside the card decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(20), // Rounded corners boxShadow: [ BoxShadow( color: Colors.black12, blurRadius: 10, offset: Offset(0, 5), // Shadow below the card ), ], ), child: Column( mainAxisSize: MainAxisSize.min, // Card shrinks to fit content children: [ // 1️⃣ Profile Picture CircleAvatar( radius: 50, backgroundColor: Colors.deepPurple[100], child: Icon(Icons.person, size: 50, color: Colors.deepPurple), ), SizedBox(height: 16), // Adds vertical space // 2️⃣ Name Text( 'Alex Johnson', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87, ), ), SizedBox(height: 8), // 3️⃣ Title/Role Text( '🚀 Junior Developer', style: TextStyle( fontSize: 16, color: Colors.grey[600], ), ), SizedBox(height: 20), // 4️⃣ Follow Button ElevatedButton( onPressed: () { print('Follow button tapped!'); // We'll make this do more later }, style: ElevatedButton.styleFrom( backgroundColor: Colors.deepPurple, padding: EdgeInsets.symmetric(horizontal: 40, vertical: 12), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30), ), ), child: Text( 'Follow', style: TextStyle(color: Colors.white, fontSize: 16), ), ), ], ), ); } } ``` --- ## 🖼️ What Your App Looks Like ``` ┌─────────────────────────────┐ │ My Profile │ ← AppBar ├─────────────────────────────┤ │ │ │ ┌───────────────┐ │ │ │ 👤 │ │ │ │ Alex Johnson│ │ │ │ 🚀 Jr. Dev │ │ │ │ [ Follow ] │ │ │ └───────────────┘ │ │ │ └─────────────────────────────┘ ``` --- ## 🧠 Key Concepts Recap ``` 📦 Widget → Everything in Flutter is a widget 📐 Column → Stacks children top-to-bottom ↔️ Row → Lines up children left-to-right 🎨 decoration → Adds colors, shadows, borders 📏 SizedBox → Adds empty space between widgets 🔘 ElevatedButton → A tappable button ``` --- ## 🏋️ Practice Challenges Try these modifications to level up: | Challenge | Difficulty | |---|---| | Change the name to YOUR name | ⭐ Easy | | Change the button color to orange | ⭐ Easy | | Add a second line of text showing a city | ⭐⭐ Medium | | Add a row of 3 icon buttons (message, share, more) | ⭐⭐ Medium | | Make the Follow button toggle between "Follow" / "Following" | ⭐⭐⭐ Hard | --- ## 🚀 Getting Started (First Time Setup) If you haven't installed Flutter yet: ```bash # 1. Install Flutter from flutter.dev # 2. Create your first project: flutter create my_first_app # 3. Navigate into it: cd my_first_app # 4. Run it on a simulator or browser: flutter run ``` --- ## 📚 What's Coming Next | Day | Topic | |---|---| | Tomorrow | **State Management** — Make your app remember things | | Day 3 | **Navigation** — Moving between screens | | Day 4 | **Fetching Data** — Loading info from the internet | | Day 5 | **Mini Project** — Build a complete To-Do app! | --- ## 💬 Remember > *"Every expert app developer was once a beginner who didn't give up."* > > Copy this code, run it, break it, fix it — that's how real learning happens! 🔥 --- **Have a question about today's lesson?** Ask away — I'm here to help you debug, explain concepts, or go deeper on anything! 🙌